<template>
  <div class="movie">
    <!-- 导航栏 -->
    <div class="movie_title">
      <van-nav-bar title="猫眼电影" left-text="返回" class="navbar" left-arrow @click-left="onClickLeft" />
    </div>
    <!-- 下拉 -->
    <div class="selection">
      <van-row justify="space-around">
        <!-- 这是下拉选项 -->
        <van-col span="5">
          <van-dropdown-menu class="dropdown">
            <van-dropdown-item title="北京" v-model="value1" :options="option1" />
          </van-dropdown-menu>
        </van-col>
        <!-- 切换 -->
        <van-col span="14">
          <div class="tabb">
            <van-tabs v-model:active="active">
              <van-tab title="正在热映">
                <div style="margin: 10px -80px">最受好评电影</div>
              </van-tab>
              <van-tab title="即将上映">
                <div style="margin: 10px -80px">近期最受期待电影</div>
              </van-tab>
            </van-tabs>
          </div>
        </van-col>
        <!-- 搜索 -->
        <van-col span="5">
          <div class="icon_search">
            <van-icon name="search" size="30" color="red" />
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 滑块-->
    <div class="box">
      <div v-for="(item, index) in movieLists" :key="item.index" @click="movieList(item.id)">
        <img :src="item.img" />
        <span class="b">观众评分 &nbsp; &nbsp;<span>{{ item.sc }}</span></span>
        <span class="bottom">{{ item.nm }}</span>
      </div>
    </div>
    <!-- 列表 -->
    <div class="list-wrap">
      <div class="item" v-for="(item, index) in movieLists" :key="item.id">
        <div class="main-block">
          <div class="avatar">
            <div class="default-img-bg">
              <img :src="item.img" style="height: 114px; width: 84px" />
            </div>
          </div>
          <div class="mb-outline-b">
            <div class="movie_title">
              <div class="title">{{ item.nm }}</div>
            </div>
            <div class="column">
              <ul class="movies_lists">
                <li>观众评 {{ item.sc }}</li>
                <li>主演:{{ item.star }}</li>
                <li>{{ item.showInfo }}</li>
              </ul>
              <div class="btn">购票</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 热门影评-->
    <div class="box">
      <div v-for="(item, index) in permorList" :key="index">
        <img :src="item.img" alt="" />
        <!-- <span class="wib_bg"></span> -->
        <span class="bottom">{{ item.name }}</span>
      </div>
    </div>
    <!-- 娱乐热点 -->
    <div class="hot-news">
      <p>娱乐热点</p>
      <div class="news-item" v-for="(item, index) in newList" :key="index">
        <a :href="item.path">{{ index + 1 }}.&nbsp;{{ item.title }}</a>
      </div>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script>
  import TabBar from '@/components/TabBar'
  import axios from "axios";
  import {
    getActor
  } from "@/api/index";
  import {
    mapState
  } from "vuex";
  export default {
    name: "Movie",
    components: {
      TabBar
    },
    data() {
      return {
        value1: 0,
        value2: "a",
        active: 2,
        option1: [{
            text: "上海",
            value: 0,
          },
          {
            text: "天津",
            value: 1,
          },
          {
            text: "深圳",
            value: 2,
          },
        ],
        list: [],
        loading: false,
        finished: false,
        newList: [],
        count: 10,
        page: 2,
        name: '',
        permorList: [],
      };
    },
    mounted() {
      // 电影数据
      this.$store.dispatch("movieList");
      this.name = this.$route.query.name;
      // 演员
      this.performer();
      // 热点
      const url = "https://api.apiopen.top/getWangYiNews";
      this.newList = axios
        .get(url, {
          params: {
            count: this.count,
            page: this.page,
          },
        })
        .then((res) => {
          this.newList = res.data.result;
          //  console.log(this.newList)
        });
    },
    computed: {
      ...mapState({
        movieLists: (state) => state.movieList.movieLists,
      }),
    },
    methods: {
      // 演员
      async performer() {
        let result = await getActor();
        if (result.code === 200) {
          this.permorList = result.actor;
          // console.log(this.permorList)
        }
        return;
      },
      // 返回
      onClickLeft() {
        this.$router.push("/home");
      },
      // 详情
      movieList(id) {
        // console.log(id)
        this.$router.push({
          name: "movielist",
          params: {
            id
          },
          query: {
            name: this.name
          }
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  .movie_title {
    /deep/ .van-icon-arrow-left {
      color: white;
    }

    /deep/ .van-nav-bar__text {
      color: white;
    }
  }

  .returns {
    position: absolute;
    z-index: 1;
  }

  .navbar {
    background-color: #f63;

    /deep/ .van-nav-bar__title {
      color: white;
    }
  }

  .tabb {
    margin-left: 12px;
  }

  .icon_search {
    margin: 8px 25px;
  }

  .dropdown {
    /deep/ .van-dropdown-menu__bar {
      box-shadow: 0px 0px 0px;
    }
  }

  .goods-card {
    margin: 10px;
    background-color: white;
  }

  .box {
    width: 350px;
    height: 200px;
    margin: 10px auto;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap; //注意设置不可换行
    position: relative;

    div {
      width: 110px;
      height: 180px;
      line-height: 200px;
      text-align: center;
      margin-right: 10px;
      // background-color: pink;
      position: relative;
      display: inline-block; //把子元素设置成行内块元素

      .b {
        line-height: 26px;
        position: absolute;
        left: 0;
        bottom: 30px;
        color: #faaf00;
        font-size: 14px;
      }

      .bottom {
        width: 109px;
        line-height: 26px;
        position: absolute;
        left: 0;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        bottom: 7px;
        font-weight: bold;
      }

      img {
        width: 100%;
        height: 145px;
      }

      // .wib_bg {
      //   display: inline-block;
      //   position: absolute;
      //   bottom: 0;
      //   width: 104px;
      //   height: 35px;
      // }
    }
  }

  .list-wrap {
    width: 343px;
    // height: 114px;
    // border: 1px solid black;
    margin-left: 15px;
    position: relative;

    .main-block {
      position: relative;
      border-bottom: 1px solid #666;
      right: 0;
      width: 330px;
      margin-bottom: 5px;
    }

    .mb-outline-b {
      position: absolute;
      width: 245px;
      top: 0;
      right: -10px;

      .title {
        font-weight: bold;
      }

      .movies_lists {
        width: 180px;
      }

      li {
        width: 170px;
        height: 20px;
        /*溢出部分文字隐藏*/
        overflow: hidden;
        /*溢出部分省略号处理*/
        text-overflow: ellipsis;
        margin: 9px auto;
        font-size: 14px;
        color: #666;
      }

      .btn {
        position: absolute;
        width: 54px;
        height: 28px;
        // border: 1px solid black;
        border-radius: 10px;
        background-color: red;
        text-align: center;
        line-height: 28px;
        font-size: 13px;
        color: white;
        top: 45px;
        right: 5px;
      }

      .btns {
        position: absolute;
        width: 54px;
        height: 28px;
        // border: 1px solid black;
        border-radius: 10px;
        background-color: rgb(89, 0, 255);
        text-align: center;
        line-height: 28px;
        font-size: 13px;
        color: white;
        top: 45px;
        right: 5px;
      }
    }
  }

  .hot-news {
    // border: 1px solid black;
    width: 343px;
    margin-top: 10px;
    margin-left: 15px;
    margin-bottom: 50px;

    .news-item {
      width: 350px;
      white-space: nowrap;
      line-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 10px;

      a {
        color: black;
      }

      :visited {
        color: black;
      }
    }
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
  }
</style>